<template>
	<view class="mark">
		<view class="mark-type">
			<view :class="['mark-type-item',active==''?'mark-type-active':'']" @click="typeChange()">全部</view>
			<view v-for="item in typeList" :class="['mark-type-item',active==item.typeId?'mark-type-active':'']" @click="typeChange(item.typeId)">
				{{item.typeName}}
			</view>
		</view>
		<view class="mark-list">
			<view v-for="item in list" class="mark-list-item">
				<view class="mark-list-title">{{item.title}}</view>
				<view class="mark-list-other">
					<image src="../../static/image/mark/day.png"></image>
					<view>{{dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')}}</view>
					<image src="../../static/image/mark/type.png"></image>
					<view>{{item.typeName}}</view>
				</view>
				<view class="mark-list-cont" v-html="item.description"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onBeforeMount,
		reactive
	} from 'vue'
	import {
		onReachBottom
	} from '@dcloudio/uni-app'
	import dayjs from 'dayjs'
	import myApi from '@/utils/api'

	const active = ref('')
	const list = ref([])
	const typeList = ref([])
	const param = reactive({
		current: 1,
		size: 5
	})
	onBeforeMount(() => {
		typeList.value = JSON.parse(uni.getStorageSync('article'))
		getList()
	})
	// 触底
	onReachBottom(() => {
		const current = param.current + 1
		if (current <= param.pages) {
			param.current = current
			getList('add')
		}
	})
	// 改变类型
	const typeChange = (e='')=>{
		active.value = e
		param.current = 1
		getList()
	}
	// 获取列表
	const getList = async (type) => {
		const {
			data: {
				records,
				current,
				pages
			},
			code
		} = await myApi.getMarkList({...param,typeId:active.value})
		if (code === 0) {
			list.value = type == 'add' ? [...list.value, ...records] : records
			param.current = current
			param.pages = pages
		}
	}
</script>
<style lang="scss">
	$color-primary:#1da57a;

	.mark {
		padding: 30rpx;

		.mark-type {
			height: 70rpx;
			white-space: nowrap;
			background-color: #fff;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			padding:10rpx;
			padding-top: 20rpx;
			border-bottom: 2rpx dotted $color-primary;

			.mark-type-item {
				display: inline-block;				
				padding: 6rpx 16rpx;
				border-radius: 10rpx;
				margin:0 10rpx;
			}
			.mark-type-active{
				background-color: $color-primary;
				opacity: 0.6;
				color: #fff;
			}
		}

		.mark-list {
			padding-top: 100rpx;
			.mark-list-item {
				margin-bottom: 30rpx;
				border: 1px solid rgba(34, 36, 38, .1);
				box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
				padding: 30rpx;
				border-radius: 10rpx;
				box-sizing: border-box;

				.mark-list-title {
					font-size: 38rpx;
					font-weight: bold;
				}

				.mark-list-other {
					line-height: 60rpx;
					padding-bottom: 20rpx;

					view {
						display: inline-block;
						font-size: 24rpx;
						margin-right: 20rpx;
					}

					image {
						height: 24rpx;
						width: 24rpx;
						padding-right: 10rpx;
						vertical-align: middle;
					}
				}

				.mark-list-cont {
					overflow: hidden;
					font-size: 24rpx;
				}
			}

		}
	}
</style>
